<template>
  <div>
<el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label=" 最低抵扣金额：">
            <el-input v-model="param.floorLimit" placeholder="请输入抵扣金额" @change="loadAllTicket()"></el-input>
          </el-form-item>
          <el-form-item label=" 最高抵扣金额">
            <el-input v-model="param.upLimit" placeholder="请输入抵扣金额" @change="loadAllTicket()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="openAddTicketInfoWindow()">新增优惠券类型</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="openAddTicketToUserWindow()">向用户发送优惠券</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

<el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-table :data="ticketDto" style="width: 100%">
          <el-table-column prop="ticketId" label="优惠券编号" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="ticketType" label="优惠券类型" width="180" align="center" label-align="center" v-if="false">
          </el-table-column>
          <el-table-column prop="cutDownPrice" label="抵扣金额" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="allowUsePrice" label="使用门槛" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="limitTime" label="有效时间(天)" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="allowVipName" label="使用需求vip等级名称" width="180" align="center" label-align="center">
          </el-table-column>
      <el-table-column prop="ticketState" label="优惠券状态" width="210px">
              <template slot-scope="scope">
                {{ scope.row.ticketState==0?"正常":scope.row.ticketState==1?"删除":"异常状态"}}
              </template>
            </el-table-column>
          <el-table-column label="操作" width="200" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button  @click="deleteTicket(scope.row)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-pagination @size-change=" handleSizeChange" @current-change="handleCurrentChange" :current-page="param.pageNum"
      :page-sizes="[3, 4, 5]" :page-size="param.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


<el-dialog title="新增优惠券" :visible.sync="addTicketInfoWindow">
      <el-form :model="addTicketForm">
        <el-form-item label="抵扣金额:">
          <el-input-number v-model="addTicketForm.cutDownPrice" placeholder="金额"></el-input-number>
        </el-form-item>
        <el-form-item label="使用门槛:">
           <el-input-number v-model="addTicketForm.allowUsePrice" placeholder="门槛金额"></el-input-number>
        </el-form-item>
        <el-form-item label="有效时间(天):">
           <el-input-number v-model="addTicketForm.limitTime" placeholder="有效时间"></el-input-number>
        </el-form-item>
        <el-form-item label="使用需求vip等级:">
           <el-input-number v-model="addTicketForm.allowVipLevel" placeholder="vip等级"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTicketInfoWindow = false">取 消</el-button>
        <el-button type="primary" @click="addTicket()">确 定</el-button>
      </div>
    </el-dialog>

<el-dialog title="发放优惠券" :visible.sync="addTicketToUserWindow">
      <el-form :model="toUserForm">
        <el-form-item label="用户编号:">
          <el-input v-model="toUserForm.userId" placeholder="请输入用户编号"></el-input>
        </el-form-item>
        <el-form-item label="优惠券编号:">
           <el-input v-model="toUserForm.ticketId" placeholder="请输入优惠券编号"></el-input>
        </el-form-item>
        <el-form-item label="发放数量:">
           <el-input v-model="toUserForm.number" placeholder="请输入发放数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTicketToUserWindow = false">取 消</el-button>
        <el-button type="primary" @click="addToUser()">确 定</el-button>
      </div>
    </el-dialog>




  </div>
</template>

<script>
  export default{
    name:"ticket",
    data(){
      return{
        param:{
          floorLimit:null,
          upLimit:null,
          pageNum:1,
          pageSize:3,
        },
        total:0,
        ticketDto:[],
        addTicketInfoWindow:false,
        addTicketForm:{
          ticketType:"通用",
        },
        addTicketToUserWindow:false,
        toUserForm:{
          userId:"",
          ticketId:"",
          number:"",
        }
      }
    },methods:{
      loadAllTicket(){
      this.$http.post("/value-added/ticket/ticketList.c",this.param).then(resp=>{
        if(resp.data.code==200){
          this.ticketDto=resp.data.data.records
          this.total=resp.data.data.total
        }else{
          this.$message({
            message: resp.data.msg,
            type: 'error'
          });
        }
      })
      },
      //改变页码大小
      handleSizeChange(pageSize) {
        this.param.pageSize = pageSize;
        this.loadData();
      },
      //改变页数
      handleCurrentChange(pageNum) {
        this.param.pageNum = pageNum;
        this.loadData();
      },
      deleteTicket(ticketdto){
       this.$http.get("/value-added/ticket/deleteTicketInfo.api",{params:{ticketId:ticketdto.ticketId}}).then(resp=>{
         if(resp.data.code==200){
           this.$message({
             message: resp.data.msg,
             type: 'success'
           });
           this.loadAllTicket()
         }else{
           this.$message({
             message: resp.data.msg,
             type: 'error'
           });
         }
       })
      },
      openAddTicketInfoWindow(){
        this.addTicketInfoWindow=true
        this.addTicketForm={}
      },
      addTicket(){
        this.$http.post("/value-added/ticket/addTicket.api",this.addTicketForm).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadAllTicket()
            this.addTicketInfoWindow=false
          }else{
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      openAddTicketToUserWindow(){
        this.addTicketToUserWindow=true
      },
      addToUser(){
        this.$http.post("/value-added/ticket/addTicketToUser.api",this.toUserForm).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.addTicketToUserWindow=false
          }else{
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      }
    },created(){
      this.loadAllTicket()
    }
  }
</script>

<style>
</style>
